<template>
	<view class="navTitle">
		<scroll-view class="scroll-view_H" :scroll-into-view="'demo'+currentIndex" scroll-x="true" @scroll="scroll">
			<view :id="'demo'+index" :class="['scroll-view-item_H',item.flag?'active':'']"
				v-for="(item,index) in classifyList" :key="index" @click="handle(item,index)">
				{{item.classify_name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getClassList
	} from "@/api/index.js"
	export default {
		name: "classifyComponent",
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				classifyList: [],
				currentIndex:0,
			};
		},
		created() {
			this._getClassList()
		},
		methods: {
			handle(item, index) {
				this.currentIndex=index
				this.classifyList.map(item => item.flag = false)
				item.flag = true
				this.$emit("sendClassify",item)
			},
			scroll: function(e) {
				// console.log(e)
				// this.old.scrollTop = e.detail.scrollTop
			},
			//获取种类
			_getClassList() {
				getClassList().then((res) => {
					if (res.code == 200) {
						res.data.forEach((item, index) => {
							if (index == 0) {
								item.flag = true
							} else {
								item.flag = false
							}
						})
						this.classifyList = res.data
						this.$emit("init",this.classifyList)
					}
				}).catch((err) => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navTitle {
		height: 100rpx;
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			height: 100rpx;
			.scroll-view-item_H {
				width: 200rpx;
				display: inline-block;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
			}

			.active {
				position: relative;
				font-size: 36rpx;
				font-weight: bolder;
			}

			.active::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: calc(50% - 50rpx);
				width: 100rpx;
				height: 8rpx;
				background-color: black;
				transition: all 5s ease;
			}
		}


	}
</style>